<html>
<head>
  <title></title>
  <style>
    @-webkit-keyframes slidein {
      from {
        margin-left: 100%;
      }
      70% {
        width: 60px;
        height: 60px;
        font-size: 150%;
      }
      to {
        margin-left: 0%;
      }
    }
    #div1 {
      -webkit-animation: slidein 3s;
    }
    #div1 {
      width: 40px;
      height: 40px;
      position: relative;
      background: #ccc;
      padding: 5px;
    }
  </style>
</head>
<body>
<div id="div1">
  hover
  右移
</div>
</body>
</html>